<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>-=Webstellation=-</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/raphael.js"></script>
		<!--script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-json.js"></script-->
		<script type="text/javascript" src="js/client.js"></script>
		<script type="text/javascript" src="js/ui.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
	<body onload="ui.lookAndFeel()">
		<table id="tbl_main" border="solid">
			<tr id="auth"><td align="center" colspan="2">
				<table id="tbl_login" >
					<tr><td align="center" colspan="2">Wellcome to Webstellation</td></tr>
					<tr>
						<td align="right"><label for="host">Server address</label></td>
						<td><input id="host" value="http://localhost:8080"></td>
					</tr>
					<tr>
						<td align="right"><label for="user">User name</label></td>
						<td><input id="user"></td>
					</tr>
					<tr><td align="center" colspan="2">
							<button onclick="client.connect(ui.loginInfo())">Connect</button>
					</td></tr>
				</table>
			</td></tr>
			<tr>
				<td colspan="2"><span id="error"></span></td>
			</tr>
			<tr align="left"><td>
					<div class="round">
						<a href="#" onclick="ui.toggle('create_game')">Create game</a> |
						<a href="#">Upload map</a> |
						<a href="#" onclick="client.disconnect()">Logout</a>
					</div>
			</td></tr>
				<tr><td id="create_game">
					<label for="gamename">name</label>
					<input id="gamename">
					<label for="mapname">map</label>
					<select id="mapname">
						<option value=""></option><!-- this is for validator -->
					</select>
					<label for="maxplayers">max players</label>
					<select id="maxplayers">
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
					</select>
					<button id="btn_creategame" onclick="client.createGame(ui.newGameInfo())">Create</button>
					<button id="btn_cancel_game" onclick="ui.toggle('create_game')">Cancel</button>
				</td></tr>
				<tr>
				<td>
					<table id="tbl_games" style="width: 700px">
						<thead>
							<tr>
								<td>Name</td>
								<td>Players</td>
								<td>Status</td>
								<td>Action</td>
							</tr>
						</thead>
						<tbody id="games">
						</tbody>
					</table>
				</td>
				<td style="width: 200px" align="left">
					<table>
						<thead>
							<tr><td valign="top" colspan="2">Game lobby</td></tr>
						</thead>
						<tbody id="gameusers">
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td id="userlist" align="left"></td>
			</tr>
		</table>
		<table width="100%" border="solid">
			<tr>
				<td id="map"></td>
				<td valign="top">
					<table>
						<thead>
							<tr><td colspan="2">Score</td></tr>
						</thead>
						<tbody id="score">
						</tbody>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>
